/* ============================================================================== */
/* 1. GLOBAL RESET & FONT */
/* ============================================================================== */
html, body {
    /* Reset dasar */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    /* Font family utama */
    font-family: 'Plus Jakarta Sans', sans-serif !important; 
}
.main-container,
.main-container * {
    box-sizing: border-box;
}
.main-container {
    background: #ffffff;
    min-height: 100vh;
    position: relative;
}

/* ============================================================================== */
/* 2. HEADER STYLING */
/* ============================================================================== */
.header-wrapper {
    padding: 0rem 6.25rem 0rem 6.25rem; 
    display: flex;
    flex-direction: column;
    gap: 4.0rem; 
    align-items: center;
    justify-content: flex-start;
    max-width: 90rem;
    width: 100%;
    margin: 3.125rem auto 0 auto; 
    position: relative;
    z-index: 30;
}

.hero {
    background: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.green-ray-logo-1 {
    flex-shrink: 0;
    width: 12.6425rem;
    height: 2.69125rem;
    position: relative;
    object-fit: cover;
    aspect-ratio: 202.28/43.06;
}

.header-menu {
    padding: 0.800625rem;
    display: flex;
    flex-direction: row;
    gap: 2.5rem; 
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.header-actions {
    display: flex;
    flex-direction: row;
    gap: 1.5rem; 
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* Menu Links */
.non-active, .active-head {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    position: relative;
    cursor: pointer;
}
.active-head { font-weight: 700; }
.non-active:hover { font-weight: 700; }
.active-head a, .non-active a { text-decoration: none; color: black; }


/* Tombol Login */
.login-btn {
    background: #136000;
    border-radius: 9999px; 
    padding: 0.91375rem 1.218125rem 0.91375rem 1.218125rem;
    display: flex;
    flex-direction: row;
    gap: 0.50125rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none; /* Untuk tag <a> */
}
.login-btn:hover { transform: scale(1.03); }
.login-text { color: #ffffff; font-weight: 600; font-size: 0.9rem; font-family: 'Plus Jakarta Sans', sans-serif;}

/* Tombol Contact Us */
.contact-us-btn {
    background: #ffffff;
    border-radius: 9999px; 
    border: 0.07875rem solid #000000;
    padding: 0.91375rem 1.218125rem 0.91375rem 1.218125rem;
    display: flex;
    flex-direction: row;
    gap: 0.589375rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none; /* Untuk tag <a> */
}
.contact-us-btn:hover { transform: scale(1.03); }
.contact-us-text { color: #000000; font-weight: 600; font-size: 0.9rem; }

.btn-cta-solar {
    /* Warna */
    background: #136000; /* Menggunakan kode hex langsung */
    color: #ffffff;
    
    /* Layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Lebar penuh */
    
    /* Ukuran & Tampilan */
    padding: 1rem 1.5rem; /* Dibuat lebih besar agar kokoh */
    border-radius: 0.75rem;
    border: none;
    font-size: 1.125rem; /* Sedikit diperbesar */
    font-weight: 600;
    text-decoration: none;
    
    /* Efek */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-cta-solar:hover {
    background-color: #0d4600; /* Warna hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-cta-solar .icon-arrow {
    display: inline-block;
    width: 1.26125rem;
    height: 1.26125rem;
    margin-left: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 12h15m0 0l-5.625-6m5.625 6l-5.625 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Ikon Helper */
.akar-icons--door{ 
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 2h11a3 3 0 0 1 3 3v14a1 1 0 0 1-1 1h-3'/%3E%3Cpath d='m5 2l7.588 1.518A3 3 0 0 1 15 6.459V20.78a1 1 0 0 1-1.196.98l-7.196-1.438A2 2 0 0 1 5 18.36zm7 10v2'/%3E%3C/g%3E%3C/svg%3E");
}

.mynaui--arrow-right {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4.5 12h15m0 0l-5.625-6m5.625 6l-5.625 6'/%3E%3C/svg%3E");
}


/* ============================================================================== */
/* 3. CONTENT PORTFOLIO STYLING */
/* ============================================================================== */

.portfolio-content {
    max-width: 80rem; 
    margin: 0 auto; 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
}

/* Penyesuaian jarak antar baris Bootstrap */
.portfolio-content .row {
    margin-bottom: 2rem !important; 
}

.portfolio-content .col-lg-6 {
    display: flex;
    flex-direction: column;
}

.portfolio-content .btn-cta-solar {
    margin-top: auto; 
}

.portfolio-content .project-details {
    flex-grow: 1;
}

.portfolio-content > .row:nth-child(3) {
    margin-top: 4rem !important;
}

/* --- Logos Client - MARQUEE --- */
.client-marquee-container {
    width: 100%;
    overflow: hidden; 
    white-space: nowrap; 
    position: relative;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 20px 0; 
    box-sizing: border-box;
    display: flex; 
    align-items: center;
}

.client-marquee {
    display: inline-block; 
    white-space: nowrap;
    animation: marquee-scroll 40s linear infinite; 
}

.client-marquee:hover {
    animation-play-state: paused; 
}

.marquee-content {
    display: inline-flex; 
    align-items: center;
    gap: 60px; 
    padding: 0 30px; 
}

.client-logo {
    max-height: 60px; 
    max-width: 180px; 
    object-fit: contain;
    flex-shrink: 0; 
    filter: grayscale(100%); 
    opacity: 0.7; 
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logo:hover {
    filter: grayscale(0%); 
    opacity: 1; 
}

/* Keyframes untuk animasi gulir */
@keyframes marquee-scroll {
    0% { transform: translateX(0%); } 
    100% { transform: translateX(-50%); } 
}


/* --- Project List --- */
.project-details {
    list-style: disc;
    padding-left: 25px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.project-details b {
    font-weight: 700;
}

.project-img {
    height: 350px; 
    object-fit: cover;
}


/* ============================================================================== */
/* 4. RESPONSIVE STYLING */
/* ============================================================================== */

@media (max-width: 992px) {
    /* Header Responsive */
    .header-wrapper {
        padding: 0rem 1.5rem;
        gap: 2rem;
    }
    .hero {
        flex-wrap: wrap;
        justify-content: center;
    }
    .green-ray-logo-1 {
        width: 10rem;
        height: auto;
    }
    .header-menu {
        order: 3; 
        width: 100%;
        justify-content: space-around;
        gap: 0.5rem;
    }
    .header-actions {
        margin-top: 1rem;
    }

    /* Portfolio Content Responsive */
    .client-logo {
        max-height: 40px; 
        max-width: 120px;
        margin: 0 10px; 
    }
    .marquee-content {
        gap: 30px; 
    }
    .project-img {
        height: 250px; 
    }

    /* Footer Responsive */
    .footer {
        flex-direction: column;
        align-items: center;
        padding: 3.125rem 1.5rem 5rem 1.5rem;
        gap: 3rem;
    }
    .footer-info, .footer-menu {
        align-self: flex-start;
        width: 100%;
    }
    .footer-menu {
        flex-direction: column; 
        gap: 3rem;
    }
    .footer-logo-text {
        width: 100%; 
    }
    .footer-desc {
        width: 100%; 
        max-width: none;
    }
    .copyright {
        text-align: center;
        width: 100%;
    }
}


/* ============================================================================== */
/* 5. FOOTER STYLING */
/* ============================================================================== */
.footer {
    background: #ffffff;
    border-style: solid;
    border-color: #000000;
    border-width: 0.03125rem 0rem 0rem 0rem;
    padding: 3.125rem 3.75rem 5rem 3.75rem;
    display: flex;
    flex-direction: row;
    gap: 6.0625rem;
    align-items: flex-start;
    justify-content: space-evenly;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    margin-top: 5rem;
}
.footer-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.footer-content { /* Class ini digunakan untuk membungkus footer-info dan copyright di HTML */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Tambahkan gap agar ada jarak antara info dan copyright */
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
.footer-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.green-ray-logo-12 {
    flex-shrink: 0;
    width: 14.6675rem;
    height: 3.121875rem;
    position: relative;
    object-fit: cover;
    aspect-ratio: 234.68/49.95;
}
.footer-desc {
    color: #000000;
    text-align: justify;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    width: 18.25rem;
}
.copyright {
    color: #000000;
    text-align: left;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    position: relative;
    align-self: stretch;
}
.footer-menu {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.menu-container-footer {
    display: flex;
    flex-direction: column;
    gap: 3.125rem;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
.title-footer {
    color: #000000;
    text-align: left;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.7rem;
    font-weight: 500;
    position: relative;
}
.dec-container-footer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
.list-footer {
    color: #000000;
    text-align: center;
    font-size: 1.125rem;
    position: relative;
    cursor: pointer;
}
.list-footer a {
    text-decoration: none;
    color: black;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
}